import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: mainWindow
    title: "TextArea Demo"
    width: 800
    height: 600
    visible: true
    color: "#FFF"

    RowLayout {
        anchors.fill: parent

        // 左侧导航栏
        ListView {
            id: navList
            Layout.preferredWidth: 180
            Layout.fillHeight: true
            section.property: "category"
            section.criteria: ViewSection.FullString
            section.delegate: Rectangle {
                width: parent ? parent.width : 180
                height: 35
                color: "#F5F7FA"
                Text {
                    x: 6
                    anchors.verticalCenter: parent.verticalCenter
                    text: section
                    color: "#1296FF"
                    font.pointSize: 12
                    font.bold: true
                }
            }
            model: ListModel {
                ListElement { name: "基本示例"; category: "TextArea基础" }
                ListElement { name: "字体与颜色"; category: "TextArea基础" }
                ListElement { name: "富文本"; category: "TextArea基础" }
                ListElement { name: "换行模式"; category: "TextArea基础" }

                ListElement { name: "样式"; category: "TextArea样式" }
                ListElement { name: "主题"; category: "TextArea样式" }
                ListElement { name: "Material风格"; category: "TextArea样式" }

                ListElement { name: "文本搜索"; category: "TextArea应用" }
                ListElement { name: "自动保存"; category: "TextArea应用" }
                ListElement { name: "带行号的文本编辑器"; category: "TextArea应用" }
                ListElement { name: "MarkDown编辑器"; category: "TextArea应用" }
                ListElement { name: "保持滚动"; category: "TextArea应用" }
            }

            delegate: Rectangle {
                width: parent ? parent.width : 180
                height: 35
                color: ListView.isCurrentItem ? "#BCE6FF": "#FFF"
                border.width: 0

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        parent.ListView.view.currentIndex = index
                        contentStack.currentIndex = index
                    }
                }

                Text {
                    x: 6
                    anchors.verticalCenter: parent.verticalCenter
                    text: name
                    color: "#333"
                    font.pointSize: 10.5
                    font.bold: true
                }
            }
        }

        // 右侧内容区
        StackLayout {
            id: contentStack
            Layout.fillWidth: true
            Layout.fillHeight: true

            // 这里按顺序放各个效果组件

            // TextArea基础
            TextAreaBase {}
            TextAreaFontColor {}
            TextAreaRich {}
            TextAreaWrap {}

            // TextArea样式
            TextAreaStyle {}
            TextAreaTheme {}
            TextAreaMaterial {}

            // TextArea应用
            TextAreaSearch {}
            TextAreaAutoSave {}
            TextAreaLineNum {}
            TextAreaMarkdown {}
            TextAreaScroll {}
        }
    }
}
